<script setup>
import { onMounted, onUpdated, onUnmounted, ref, reactive, getCurrentInstance } from 'vue'
import _ from 'lodash'
import axios from 'axios';
import { ElMessage } from 'element-plus'

var currentTitle = ref("新建用户");
const userList = ref([]);
var totalCount = ref(0);

var dialogFormVisible = ref(false);
const formData = reactive({
    username: '',
    password: '',
    telephone: '',
    email: ''
})

onMounted(() => {

    loadList();
})

async function loadList() {

    var ret = await axios.get('/api/user');
    if (ret.data.code == 0) {
        userList.value.length = 0;
        totalCount.value = ret.data.data.total;
        _(ret.data.data.items).forEach((v) => {
            userList.value.push(v);
        })
    }
}

async function handleDelete(index, row) {
    var ret = await axios.delete('/api/user/' + row.id);
    if (ret.data.code == 0) {
        loadList();
    }
    else {
        ElMessage({
            message: ret.data.data,
            type: 'error',
        })
    }
}

function handleEdit(index, row) {
    currentTitle.value = "编辑用户";

    formData.id = row.id;
    formData.username = row.username;
    formData.password = row.password;
    formData.email = row.email;
    formData.telephone = row.telephone;

    dialogFormVisible.value = true;
}

function handleCreate() {
    currentTitle.value = "新建用户";
    dialogFormVisible.value = true;
    delete formData.id;
}

async function createUserInfo() {
    if (formData.username === "") {
        ElMessage({
            message: '用户名不能空',
            type: 'warning',
        })
        return;
    }
    if (formData.password === "") {
        ElMessage({
            message: '密码不能空',
            type: 'warning',
        })
        return;
    }

    var ret = await axios.post('/api/user', formData);
    if (ret.data.code == 0) {
        loadList();
    }
    dialogFormVisible.value = false;

    formData.id = "";
    formData.username = "";
    formData.password = "";
    formData.email = "";
    formData.telephone = "";
}


</script>

<template>
    <el-page-header title="用户信息" icon="">
        <template #extra>
            <div>
                <el-button type="primary" @click="handleCreate" class="ml-2"><el-icon>
                        <CirclePlus />
                    </el-icon>新建用户</el-button>
            </div>
        </template>
        <div>
            <el-table class="tableClass" :data="userList" style="width: 100%" :default-expand-all="true" border
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }" :row-style="{ height: '50px' }">
                <el-table-column type="index" width="45"></el-table-column>
                <el-table-column prop="username" label="名称"> </el-table-column>
                <el-table-column prop="password" label="密码"> </el-table-column>
                <el-table-column prop="telephone" label="联系电话"> </el-table-column>
                <el-table-column prop="email" label="邮箱"> </el-table-column>
                <el-table-column label="操作" width="130">
                    <template #default="scope">
                        <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">
                            <el-icon>
                                <Edit />
                            </el-icon>
                        </el-button>
                        <el-popconfirm width="220" confirm-button-text="确定" @confirm="handleDelete(scope.$index, scope.row)"
                            cancel-button-text="取消" icon-color="#626AEF" title="确定删除此用户?">
                            <template #reference>
                                <el-button size="small" type="danger">
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog v-model="dialogFormVisible" :title="currentTitle" width="500">
                <el-form :model="formData">
                    <el-form-item label="用户名" label-width="90">
                        <el-input v-model="formData.username" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="密码" label-width="90">
                        <el-input v-model="formData.password" type="password" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="联系电话" label-width="90">
                        <el-input v-model="formData.telephone" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="邮箱" label-width="90">
                        <el-input v-model="formData.email" autocomplete="off" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="createUserInfo">
                            确定
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </el-page-header>
</template>


<style scoped></style>